<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-01-05 17:51:59
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-10-19 09:56:56
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="create-high"
    :rules="rules"
    :model="form"
    label-width="100px"
    size="medium"
  >
    <el-form-item label="云主机数量" prop="num">
      <el-input-number
        v-model="form.num"
        :min="1"
        :precision="0"
        label="云主机数量"
        :disabled="true"
      />
      <div class="hint" style="margin-left: 20px">
        <i class="el-icon-info icon"></i>
        <div class="text">云主机数量默认为1</div>
      </div>
    </el-form-item>
    <el-form-item class="item" label="登录密码" prop="loginPwd">
      <el-row type="flex" align="middle">
        <el-input
          v-model="form.loginPwd"
          placeholder="请输入登录密码"
          :disabled="basic.cloudProvider === 'Openstack'"
        />
        <el-popover placement="right" width="250" trigger="hover">
          <p v-html="pwdRule"></p>
          <i
            slot="reference"
            class="el-icon-info icon"
            style="font-size: 18px; margin-left: 10px"
          ></i>
        </el-popover>
      </el-row>
    </el-form-item>
    <el-form-item class="item" label="确认密码" prop="confirmPwd">
      <el-input
        v-model="form.confirmPwd"
        placeholder="请输入确认密码"
        :disabled="basic.cloudProvider === 'Openstack'"
      />
    </el-form-item>
    <el-form-item label="标签" prop="vmTags">
      <VmTags :vm-tags.sync="form.vmTags" />
    </el-form-item>
  </el-form>
</template>

<script>
import VmTags from './VmTags.vue'

const PWD_RULE = '密码长度6~30个字符，不能包含空白字符'
const PWD_RULE_ALIYUN =
  "密码长度8~30个字符，须同时包含大写字母、小写字母、数字、特殊字符()`~!@#$%^&*-_+=|{}[]:;,'<>,.?/中的任意三种。"
const PWD_RULE_TENCENT =
  '长度8~30位，推荐使用12位以上的密码，不能以“/”开头，须同时包含大写字母、小写字母、数字、特殊字符中的任意三种。'
const PWD_RULE_HUAWEI =
  '密码长度8~26个字符，且至少包含大写字母、小写字母、数字、特殊字符（!@$%^-_=+[{}]:,./?~#*）中的三种。'

export default {
  name: 'CreateHigh',
  components: {
    VmTags
  },
  props: {
    basic: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    /**
     * @description: 校验confirmPwd
     * @param {*} rule
     * @param {*} value
     * @param {*} callback
     * @return {*}
     */
    var validateConfirmPwd = (rule, value, callback) => {
      if (this.form.confirmPwd === '') {
        callback(new Error('请输入确认密码')) // 抛出异常
      } else {
        if (this.form.confirmPwd === this.form.loginPwd) {
          callback()
        } else {
          callback(new Error('请确认输入的密码和登录密码一致')) // 抛出异常
        }
      }
    }
    /**
     * @description: 校验vmTags
     * @param {*} rule
     * @param {*} value
     * @param {*} callback
     * @return {*}
     */
    var validateVmTags = (rule, value, callback) => {
      if (Array.isArray(this.form.vmTags) && this.form.vmTags.length > 0) {
        // 不为空
        const reg = /^([a-zA-Z\d-_\\\/\:\.\s])*$/ // 校验的正则
        let hasIllegal = false // 是否存在不合法
        for (const item of this.form.vmTags) {
          if (
            item.key === '' ||
            !reg.test(item.key) ||
            item.value === '' ||
            !reg.test(item.value) // 数据为空或不符合规则
          ) {
            // 存在不合法
            hasIllegal = true
            break
          }
        }
        if (hasIllegal) {
          callback(new Error('存在不合法的标签键值')) // 抛出异常
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      pwdRule: PWD_RULE,
      form: {
        num: '', // 虚机数量
        loginPwd: '', // 登录密码
        confirmPwd: '', // 确认密码
        vmTags: [] // 标签
      },
      rules: {
        num: [{ required: true, message: '请输入云主机数量', trigger: 'blur' }],
        loginPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[\S]{6,30}$/,
            message: PWD_RULE
          }
        ],
        confirmPwd: [{ required: true, validator: validateConfirmPwd }],
        vmTags: [{ validator: validateVmTags }]
      }
    }
  },
  computed: {},
  watch: {
    'basic.cloudProvider': {
      handler(newVal) {
        if (newVal === 'Openstack') {
          // Openstack 特殊处理
          this.form.loginPwd = '123456'
          this.form.confirmPwd = '123456'
        }
        this.handlePwdRule(newVal)
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 处理密码规则
     * @param {*} cloudProvider
     * @return {*}
     */
    handlePwdRule(cloudProvider) {
      if (cloudProvider === '阿里云') {
        this.pwdRule = PWD_RULE_ALIYUN
        this.rules.loginPwd = [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]+$)(?![a-z0-9]+$)(?![a-z\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]+$)(?![0-9\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]+$)[a-zA-Z0-9\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]{8,26}$/,
            message: PWD_RULE_ALIYUN
          }
        ]
      } else if (cloudProvider === '华为云') {
        this.pwdRule = PWD_RULE_HUAWEI
        this.rules.loginPwd = [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\!\@\$\%\^\-_\=\+\[\{\}\]\:\,\.\/\?\~\#\*]+$)(?![a-z0-9]+$)(?![a-z\!\@\$\%\^\-_\=\+\[\{\}\]\:\,\.\/\?\~\#\*]+$)(?![0-9\!\@\$\%\^\-_\=\+\[\{\}\]\:\,\.\/\?\~\#\*]+$)[a-zA-Z0-9\!\@\$\%\^\-_\=\+\[\{\}\]\:\,\.\/\?\~\#\*]{8,26}$/,
            message: PWD_RULE_HUAWEI
          }
        ]
      } else if (cloudProvider === '腾讯云') {
        this.pwdRule = PWD_RULE_TENCENT
        this.rules.loginPwd = [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]+$)(?![a-z0-9]+$)(?![a-z\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]+$)(?![0-9\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]+$)[a-zA-Z0-9\(\)\`\~\!\@\#\$\%\^\&\*\-_\+\=\|\{\}\[\]\:\;\'\<\>\,\.\?\/]{8,26}$/,
            message: PWD_RULE_TENCENT
          }
        ]
      } else {
        this.pwdRule = PWD_RULE
        this.rules.loginPwd = [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[\S]{6,30}$/,
            message: PWD_RULE
          }
        ]
      }
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-high {
  .item {
    display: inline-block;
    width: calc(50% - 12.5px);
    &.right {
      margin-left: 25px;
    }
  }
  .hint {
    display: inline-flex;
    .icon {
      color: #b9b9b9;
      font-size: 18px;
      margin-right: 3px;
      line-height: 18px;
    }
    .text {
      .textStyle(13px , 400, #C3C3C3);
      line-height: 18px;
    }
  }
}
</style>
